import { api } from "@/api";
import BannerPage from "@/components/page/BannerPage";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import styled from "styled-components";

const Styled = styled.div`
  li {
    text-align: center;
  }
  span {
    color: rgba(156, 163, 175, 1);
    font-size: 2.25rem;
    line-height: 2.5rem;
    margin-left: 1.25rem;
  }
  .category-list {
    margin: 0 1.8rem;
    list-style: none;

    .category-list-item {
      font-size: 4rem;
      padding: 8px 1.8rem 8px 0;
    }

    .category-list-item:before {
      display: inline-block;
      position: relative;
      left: -4rem;
      width: 12px;
      height: 12px;
      border: 0.9rem solid #49b1f5;
      border-radius: 50%;
      background: #fff;
      content: "";
      transition-duration: 0.3s;
    }

    .category-list-item:hover:before {
      border: 0.9rem solid #ff7242;
    }

    .category-list-item a:hover {
      transition: all 0.3s;
      color: #8e8cd8;
    }

    .category-list-item a:not(:hover) {
      transition: all 0.3s;
    }
  }
`;

const Category = () => {
  const [loading, setLoading] = useState(true);
  const [categoryList, setCategoryList] = useState([]);

  useEffect(() => {
    (async () => {
      const res = await api.getCategorys();
      setCategoryList(res.data.list);
      setLoading(false);
    })();
  }, []);

  return (
    <Styled>
      <BannerPage loading={loading} title="分类" label="category">
        <ul className="category-list card-fade-up">
          {categoryList.map((item) => {
            return (
              <li key={item.id} className="category-list-item">
                <Link to={`/categories/${item.id}?name=${item.name}`}>
                  {item.name}
                </Link>
                <span>({item.article_count ?? 0})</span>
              </li>
            );
          })}
        </ul>
      </BannerPage>
    </Styled>
  );
};

export default Category;
